<template>
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="800px"
    @close="closeClick"
  >
    <header-search
      @search="handleQuery"
      @reset="resetQuery"
      v-model="tableFilters"
    />

    <custom-table
      ref="zzllks"
      :height="'500px'"
      :order="true"
      :tableLoading="tableLoading"
      :columns="jlhbColumns"
      @selection-change="selsChange"
      @afterCurrentPageClick="afterCurrentPageClickHandle"
    >
    </custom-table>

    <div
      v-if="isMultiSelect"
      slot="footer"
      class="dialog-footer"
      style="padding-top: 0px; margin-top: -16px"
    >
      <el-button type="primary" @click="getMulRows()">确 定</el-button>
      <el-button @click="closeClick()">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import HeaderSearch from "@/components/FormQuery/index";
import CustomTable from "@/components/CustomTable/index";
import { listMaterial } from "@/api/service/material";
export default {
  // name: "corpCustTabDialog",
  components: {
    HeaderSearch,
    CustomTable,
  },
  props: {
    isRowClick: {
      type: Boolean,
      default: true,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    showObj: {
      type: Object,
    },
    position: {
      type: [String, Number],
    },
    isMultiSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "选择原料", // 弹窗标题
      tableFilters: [
        // 搜索条件配置
        {
          type: "input",
          key: "id",
          value: "",
          placeholder: "ID",
          label: "",
        },
        {
          type: "input",
          key: "name",
          value: "",
          placeholder: "原料名称",
          label: "",
        },
      ],
      queryParams: {
        // 搜索字段
        pageNum: 1,
        pageSize: 10,
        id: null,
        name: null,
      },
      elseParams: {},
      ////////////////////////////table用字段
      tableLoading: false, // 表格loading
      jlhbColumns: [
        {
          prop: "id",
          label: "ID",
          align: "center",
          width: "180px",
        },
        {
          prop: "name",
          label: "原料名称",
          align: "center",
        },
        // {
        //   prop: "nature",
        //   label: "门店性质",
        //   align: "center",
        //   render: (h, row) => {
        //     const { nature } = row;
        //     let text = "";
        //     switch (nature) {
        //       case 1:
        //         text = "直营";
        //         break;
        //       case 2:
        //         text = "加盟";
        //         break;
        //     }
        //     return h("span", text);
        //   },
        // },
        // 这里是后端给我们数字我们转文字
      ],
      ////////////////////////////table用字段end
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 调用数据接口
    getList() {
      this.tableLoading = true; // 表格的Loading
      Object.assign(this.queryParams, this.elseParams); // 注意这里必须像我这样用
      listMaterial(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            const current = this.queryParams.pageNum;
            const data = res.rows;
            const total = res.total;

            this.$refs.zzllks &&
              this.$refs.zzllks.setPageInfo(current, total, data); // 这里是把数据给表格页
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    getMulRows() {
      const list = [];
      this.multipleList.forEach((item) => {
        if (item.rows) {
          list.push(...item.rows);
        }
      });
      this.closeClick(list);
    },
    closeClick(row) {
      // position: 有多个的弹框需要展示的时候 用position 区分
      this.$emit("closeHandler", row, this.position);
    },
    // 分页查询
    afterCurrentPageClickHandle(val) {
      this.elseParams.pageNum = val.nCurrent;
      this.elseParams.pageSize = val.nSize;
      this.getList();
    },
    // 批量审批
    selsChange(sels) {
        this.sels = sels;
        this.selsId = [];
        this.sels.map((item) => {
            this.selsId.push(item.id);
        });
    },
    //////////////////// 搜索组件用方法
    /** 搜索按钮操作 */
    handleQuery(params) {
      this.elseParams = params;
      this.queryParams.pageNum = 1;
      this.$refs.zzllks && this.$refs.zzllks.setPageInit(); // 这里是前面表格的封装调用表格里面的方法
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery(params) {
      this.elseParams = params;
      this.$refs.zzllks && this.$refs.zzllks.setPageInit(); // 这里是前面表格的封装
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //////////////////// 搜索组件用方法
  },
};
</script>